<template>
	<view class="productManagement">
		<view class="search-wrapper">
			<input confirm-type="search" @confirm="search" type="text" v-model="keywords" class="input"
				placeholder="输入商品名称关键字查询" />
			<uni-icons v-if="keywords" type="clear" @tap="keywords = ''" size="18" color="#898989"
				class="close"></uni-icons>
			<image src="../static/image/search-icon.png" class="icon" mode="widthFix"></image>
			<view class="search-btn" @click="search">
				搜索
			</view>
		</view>
		<view class="tabs-wrapper">
			<v-tabs v-model="current" :tabNumbers="tabNumbers" @change="changeTab" :tabs="tabList" :scroll="false"
				:bold="false" lineHeight="4rpx" lineColor="#555BFF" activeColor="#555BFF" color="#79838A"
				fontSize="30rpx"></v-tabs>
		</view>
		<view class="page-wrapper">
			<swiper class="swiper" :current="current" @change="changePage">
				<swiper-item class="swiper-item" v-for="(_swiper,i) in tabList" :key="i">
					<mescroll-item :keywords="keywords" @refresh="refresh" @getCount="getCount" ref="mescrollItem"
						:i="i" :index="current"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
		<uni-popup ref="pricePopup">
			<view class="price-popup-wrapper">
				<view class="title-wrapper">
					调整价格
				</view>
				<view class="form-item">
					<view class="label">
						价格
					</view>
					<view class="input-wrapper">
						<input type="digit" focus v-model="price" placeholder="请输入价格" class="input">
					</view>
				</view>
				<view class="btn-wrapper">
					<view class="btn cancel" @click="close">
						取消
					</view>
					<view class="btn" @click="submit">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MescrollItem from "./mescroll-swiper-item.vue";

	export default {
		data() {
			return {
				tabList: ['售卖中', '已下架', '待审核', '审核驳回', '已冻结'],
				tabNumbers: [],
				first: true,
				current: 0,
				swiperList: [],
				keywords: '',
				price: '',
				selectItem: {}
			}
		},
		onLoad(option) {
			this.getCount()
			if (option.type) {
				this.$nextTick(() => {
					this.current = parseInt(option.type);
				})
			}
		},
		methods: {
			changePage(e) {
				this.current = e.detail.current;
			},
			changeTab() {

			},
			async getCount() {
				const data = await this.$api.get('/adm/product/statusCount', {}, false)
				if (data.code === 200) {
					this.tabNumbers = [data.data.on_sale, data.data.take_off, data.data.under_review, data.data
						.fail_the_audit, data.data.frozen
					]
				}
			},
			refresh() {
				this.getCount()
				this.$refs.mescrollItem[this.current].refresh();
			},
			search() {
				this.$refs.mescrollItem[this.current].refresh();
			},
			changePrice(data) {
				console.log(data)
				this.price = '';
				this.selectItem = data;
				this.$refs.pricePopup.open('center')
			},
			close() {
				this.$refs.pricePopup.close();
			},
			async submit() {
				if (!this.price) {
					uni.showToast({
						title: '请输入价格',
						icon: 'none'
					})
					return
				}
				const data = await this.$api.post('/adm/product/setExaminePrice', {
					id: this.selectItem.id,
					examinePrice: this.price
				})
				if (data.code === 200) {
					uni.showToast({
						title: '修改成功！'
					})
					this.$refs.pricePopup.close();
					this.search();
				}
			}
		},
		components: {
			MescrollItem
		}
	}
</script>

<style lang="scss" scoped>
	.productManagement {
		height: 100%;
		overflow: hidden;

		.search-wrapper {
			background-color: #ffffff;
			margin: 3upx 0;
			padding: 10upx 20upx;
			position: relative;
			display: flex;
			align-items: center;

			.input {
				border-radius: 10upx;
				border: 2upx solid #acacac;
				height: 70upx;
				width: 100%;
				padding: 0 120upx 0 30upx;
				box-sizing: border-box;
				font-size: 32upx;
			}

			.icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 190upx;
				width: 26upx;
				height: 26upx;
			}

			.close {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 230upx;
			}

			.search-btn {
				width: 200upx;
				background-color: #555BFF;
				color: #ffffff;
				height: 70upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10upx;
				margin-left: 10upx;
				font-size: 28upx;
			}
		}

		.swiper {
			height: calc(100vh - 70upx);

			.nodata-wrapper {
				text-align: center;
				font-size: 32upx;
				color: #666666;

				.nodata-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 246upx;
				}

				.loading-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 296upx;
					height: 205upx;
				}
			}
		}

		.price-popup-wrapper {
			width: 600upx;
			background-color: #ffffff;
			border-radius: 20upx;
			min-height: 300upx;
			overflow: hidden;

			.title-wrapper {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 32upx;
				font-size: 36upx;
				color: #2B2B2B;
			}

			.form-item {
				margin: 0 44upx;
				height: 100upx;
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #f9f9f9;

				.label {
					font-size: 32upx;
					color: #5B5B5B;
				}

				.input-wrapper {
					flex: 1;

					.input {
						width: 100%;
						text-align: right;
					}
				}
			}

			.btn-wrapper {
				height: 150upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 40upx;

				.btn {
					width: 260upx;
					height: 76upx;
					border-radius: 40upx;
					background-color: #555BFF;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: .15s linear;

					&:active {
						background-color: #555BFF66;
					}

					&.cancel {
						box-sizing: border-box;
						background-color: #ffffff;
						border: 2upx solid #555BFF;
						margin-right: 40upx;
						color: #555BFF;

						&:active {
							background-color: #F2F4FA77;
						}
					}
				}
			}
		}
	}
</style>